<template>
  <section class="component add-trigger">
    <el-form :model="model" :rules="modelRules" ref="form" label-width="130px">
      <el-form-item label="触发器名称" prop="triggerName">
        <el-input v-model.trim="model.triggerName"></el-input>
      </el-form-item>
      <el-form-item label="CRON表达式" prop="cronExpression">
        <el-input v-model.trim="model.cronExpression"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input type="textarea" v-model.trim="model.description" :maxlength="100"></el-input>
      </el-form-item>
    </el-form>

    <div class="operate-buttons">
      <el-button @click="close">取消</el-button>
      <el-button @click="confirmClick">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Dependencies } from '~/core/decorator'
import { Prop, Emit } from 'vue-property-decorator'
import { TaskService } from '~/service/service-manage/task.service'

@Component({})
export default class AddTrigger extends Vue {
  @Dependencies(TaskService)
  private taskService: TaskService
  @Prop()
  private triggerData

  private model: any = {
    triggerName: '',
    cronExpression: '',
    description: '',
  }
  private modelRules: any = {
    triggerName: [{ required: true, message: '触发器名称不能为空', trigger: 'blur' }],
    cronExpression: [{ required: true, message: 'CRON表达式不能为空', trigger: 'blur'}]
  }

  @Emit('refreshData')
  private refreshData() {}
  @Emit('close')
  private close() {}

  public refresh() {
    let addForm: any = this.$refs['form']
    addForm.resetFields()
  }

  private confirmClick() {
    const params: any = {
      jobName: this.triggerData.jobName,
      jobGroup: this.triggerData.jobGroup,
      triggerName: this.model.triggerName,
      cronExpression: this.model.cronExpression,
      description: this.model.description
    }
    this.taskService.addTrigger(params).subscribe(
      data => {
        this.refreshData()
        this.close()
        this.$message.success('操作成功')
      },
      error => this.$message.error(error.msg)
    )
  }
}
</script>
